<template>
  <div class="zhkuang-view">
    <!-- 用于业务组件的展示-可再增加标题组件id-动态调用多个标题组件 -->
    <titleBoxVue :boxmessage="showviewmes">
      <template v-if="showviewmes.comList" slot="boxone-slot">
        <div
          v-for="(itemtwo, indextwo) in showviewmes.comList"
          :key="indextwo"
          class="boxone-slot"
          :style="{ height: itemtwo.height + '%' }"
        >
          <div
            v-for="(itemthree, indexthree) in itemtwo.children"
            :key="indexthree"
            class="boxone-slot-two"
            :style="{ width: itemthree.width + '%' }"
          >
            <component
              :is="itemthree.comName"
              v-if="itemthree.comName"
              :url="itemthree.unitCode"
              :unit-code="itemthree.unitCode"
              :cockpit-assembly-code="itemthree.cockpitAssemblyCode"
              :data-sources="itemthree.dataSources"
            />
          </div>
        </div>
      </template>
    </titleBoxVue>
  </div>
</template>

<script>
import titleBoxVue from "../title-box/title-box.vue";
import { getcomMes } from "@/components/getnameurl";
import { getTitleName } from "@/components/getTitleName";
export default {
  name: "Showkuangview",
  components: { titleBoxVue },
  props: {
    boxmessage: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      // 处理后可展示的组件数据
      showviewmes: {}
    }
  },
  watch: {
    // nowselectbarId(newval) {
    //   if (newval) {
    //     this.nowselectbarId = newval;
    //     this.setComMet();
    //   }
    // },
    boxmessage: {
      handler(newval) {
        if (newval && newval.length > 0) {
          // this.boxmessage = newval
          console.log("左侧框详细信息", newval);
          this.handlerboxmessage();
        }
      },
      deep: true
    }
  },
  mounted() {
    this.handlerboxmessage()
  },
  methods: {
    // 处理后端组件信息
    handlerboxmessage() {
      this.tpconeLeftList = [];
      // this.boxmessage.forEach(async (itemone) => {
      let itemone = this.boxmessage
      // 一个框框的内的基础信息
      let kaungbox = {
        // 标题
        titleMes: "",
        // 组件信息-转化后适应项目的结构
        comList: [],
        height: itemone.assemblyHeight || 33
      };
      kaungbox.titleMes = getTitleName(itemone.assemblyCode);
      // 通过唯一标识获取框的基础信息
      if (
        itemone.cockpitAssemblyContentList &&
          itemone.cockpitAssemblyContentList.length > 0
      ) {
        // 框框里具体的组件
        itemone.cockpitAssemblyContentList.forEach((itemtwo) => {
          let comListmes = {
            height: 100,
            children: []
          };
          if (itemtwo) {
            // 这里主要拿到最基础组件的第一个高度，作为基础组件上一层的高度
            itemtwo.forEach((itemthree, indexthree) => {
              if (itemthree.comType) {
                let childmes = {
                  comType: itemthree.comType || "A1",
                  comName: "",
                  width: itemthree.width || 100,
                  unitCode: itemthree.unitCode || "",
                  dataSources: itemthree.dataSources,
                  cockpitAssemblyCode: itemthree.cockpitAssemblyCode
                };
                if (indexthree === 0) {
                  comListmes.height = itemthree.height || 100;
                }
                comListmes.children.push(childmes);
              }
            });
          }
          kaungbox.comList.push(comListmes);
        });
      }
      if (kaungbox.comList && kaungbox.comList.length > 0) {
        kaungbox.comList.forEach((itemtwo) => {
          if (itemtwo.children && itemtwo.children.length > 0) {
            itemtwo.children.forEach((itemthree) => {
              let testurl = this.dynamicComponent(itemthree) || 'tpc1-other/jianjie'
              console.log('基础组件引用路径', testurl)
              // 动态引入有毒-建议不要动-20220621
              // let zz = () => import("@/components/" + this.dynamicComponent(itemthree));
              // let zz = () => import("@/components/tpc1-other/jianjie.vue")
              // let zz = () => {
              //   // return import("../tpc1-other/jianjie.vue")
              //   return import('../' + testurl + '.vue')
              // }
              let zz = resolve => require.ensure([], () => resolve(require('../' + testurl + '.vue')));
              itemthree.comName = zz;
            });
          }
        });
      }
      this.showviewmes = kaungbox
      console.log('真业务组件信息', this.showviewmes)
    },
    dynamicComponent(e) {
      let fileMes = getcomMes(e.comType);
      if (fileMes && fileMes.url) {
        let linone = fileMes.url;
        return linone;
      } else {
        return '';
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.zhkuang-view{
    width: 100%;
    height: 400px;
    // background-color: aqua;
}
</style>
